import React from 'react'
import '../../styles/Input.css'

function Input({ 
  type = 'text',
  placeholder = '',
  value = '',
  onChange,
  label = '',
  error = '',
  disabled = false,
  className = '',
  required = false
}) {
  const inputClasses = [
    'custom-input',
    error ? 'input-error' : '',
    disabled ? 'input-disabled' : '',
    className
  ].filter(Boolean).join(' ')

  return (
    <div className="input-container">
      {label && (
        <label className="input-label">
          {label}
          {required && <span className="required">*</span>}
        </label>
      )}
      <input
        type={type}
        placeholder={placeholder}
        value={value}
        onChange={onChange}
        disabled={disabled}
        className={inputClasses}
        required={required}
      />
      {error && <span className="input-error-message">{error}</span>}
    </div>
  )
}

export default Input 